<template>
  <div class="icons">
    <swiper ref="iconsSwiper" 
    	v-bind:options="swiperOptions" 
    	v-if="showSwiper">
      	<swiper-slide v-for="(page, index) of pages" :key="index">
	        <div 
				class="icon" 
				v-for="item of page" 
				v-bind:key="item.id">
				    <div class='icon-img'>
					   <img class='icon-img-content' :src='item.imgUrl' v-on:click="goDetail(item.id)" />
				    </div>
				    <p class="icon-desc">{{item.desc}}</p>
	        </div>
      	</swiper-slide>
    </swiper>
  </div>
</template>

<script type="text/javascript">  
	export default {
    	name: 'icons',
    	props:["iconList"],      
    	data () {
      		return {
        		swiperOptions: {           //swiper vue版，参数函数参见
        	  		pagination: {
            			el: '.swiper-pagination'
          			},
          			autoplay:false,
              		loop: true
        		}      		      
      		}
    	},
	    computed: {	      
	      	showSwiper(){    
	      		return this.iconList.length>1;
	      	},
	      	pages(){      
	      		//计算原始数据可能分多少页，典型的分页算法
	      		//	实际上老师这个算法觉得不太好，循环干嘛，Math.ceil(this.list/8)其结果就是能分多少页
	      		const pages = [];
      			this.iconList.forEach((item, index) => {
        			const page = Math.floor(index / 8);
        			if (!pages[page]) {
          				pages[page] = [];
        			}
        			pages[page].push(item);
      			});
      			return pages;
	      	}
	    },
		methods:{
			goDetail(id){				
				this.$router.push({
					path:"detail/" + id
				});
			}
		}
	}
</script>

<style lang="stylus" scoped>

@import '~@/assets/varibles.styl'
@import '~@/assets/mixins.styl'

//scope域限制此冲突不会扩展到全局,通过样式添加属性限制,但是我们需要冲突.swiper-container类，这个类是swiper组件提供的类,
//	如果不做处理这个.swiper-container样式类只能在本组件内起作用，冲突不了全局（swiper库）的css，因此要让这个样式穿透出去
.icons >>> .swiper-container               
    height: 0						//没有高度，用padding来作形式上的高度
    padding-bottom: 50%				//这个百分比是相对于自身宽度	
    overflow: hidden                //老师这种bfc的利用方式其内部内容全浮动，没有能撑开文档流的内容，这里不写也行
    width: 100%                     //默认值，可以不写
.icons
	margin-top: .1rem
	.icon
  		position: relative
  		overflow: hidden
  		float: left
  		width: 25%
  		height: 0
  		padding-bottom: 25%         //如果宽度是100%，那么padding-bottom现对于这个定位自然没有问题，而其不是100%，这个值你要试一下才能决定这里的结果是一个1:1盒子
  	.icon-img
	    position: absolute
	    top: 0
	    left: 0
	    right: 0
	    bottom: .44rem
	    box-sizing: border-box
	    padding: .1rem
	    .icon-img-content
      		display: block
      		margin: 0 auto
      		height: 100%
  		.icon-desc
	    position: absolute
	    left: 0
	    right: 0
	    bottom: 0
	    height: .44rem
	    line-height: .44rem
	    text-align: center
	    color: $darkTextColor
	    ellipsis()	
</style>
<style lang="stylus" scoped>
.icons
  .icon
    border:0px solid red
</style>